<template>
  <div class="provider-detail-container" v-loading="loading">
    <no-auth v-if="!loading && !hasViewProviderAuth"></no-auth>
    <template v-if="!loading && hasViewProviderAuth">
      <div class="service-detail-header common-detail-header">
        <div class="service-detail-header-left">
          <div class="provider-basic-info base-tags">
            {{ fieldValue.providerName }}（{{ $t('common.base.encode') }}：{{ fieldValue.providerCode }}）
            <el-tag class="mar-r-5" v-for="(a, index) in fieldValue.tagLabel" :key="index" effect="dark">{{ a.labelName }} </el-tag>
          </div>
          <div class="provider-btn flex-x">
            <template v-if="buttonAuth['addEngineerAuth']">
              <el-button v-if="tenantType === 1" type="plain-third" @click="closeAndOpenTab('PageServiceEngineerCreate', '', `tenantProviderId=${tenantProviderId}`)">{{ $t('common.base.createEngineer') }}</el-button>
              <el-button v-else type="plain-third" @click="addEngineer">{{ $t('common.base.addEngineer') }}</el-button>
            </template>
            <el-button v-if="buttonAuth['managerEngineerRoleAuth']" type="plain-third" @click="openEngineerRule">{{ $t('serviceProvider.engineerAuth') }}</el-button>
            <el-button type="plain-third" v-if="buttonAuth['pass']" @click="agreeAudit">{{ $t('common.base.approved') }}</el-button>
            <el-button type="plain-third" v-if="buttonAuth['reject']" @click="rejectAudit">{{ $t('common.base.refuse') }}</el-button>
            <el-dropdown v-if="moreBtnEnable" class="mar-l-12">
              <el-button type="plain-third">{{ $t('common.base.more') }}<i class="iconfont icon-fdn-select"></i></el-button>
              <el-dropdown-menu slot="dropdown" class="el-dropdown-provider">
                <el-dropdown-item>
                  <div v-if="buttonAuth['setProviderAccount']" @click="bulkAllocation">{{ $t('serviceProvider.accountsLimit') }}</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div v-if="!isProviderUser && buttonAuth['administerProvider']" @click="setManageProvider">{{ $t('common.base.setManager') }}</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div v-if="buttonAuth['addEngineerAuth'] && tenantType === 1" @click="addEngineer">{{ $t('serviceProvider.recoverEngAccount') }}</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div v-if="buttonAuth['isMain']" @click="setMainDispatcher">{{ $t('common.base.setPrincipal_1') }}</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div v-if="buttonAuth['edit']" @click="editProvider">{{ $t('common.base.edit') }}</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div v-if="buttonAuth['delete']" @click="logoutProvider">{{ $t('common.base.logout') }}</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="provider-other-info mar-b-8">
          <div>
            <div class="title">{{ $t('common.base.internalAdmin') }}：</div>
            <el-tooltip popper-class="engineer-info-manage-popper" class="engineer-info-manage" placement="left">
              <span slot="content" class="mar-r-4" v-for="(item, index) in fieldValue.internalAdmin" :key="index">
                <!-- 部门 -->
                <template v-if="item.objType === 0">{{ item.name }}</template>
                <!-- 人员 -->
                <template v-else-if="item.objType === 1">
                  <open-data v-if="isOpenData" type="userName" :openid="item.staffId"></open-data>
                  <span v-else>{{ item.name }}</span>
                </template>
              </span>
              <div>
                <span class="mar-r-4" v-for="(item, index) in fieldValue.internalAdmin" :key="index">
                  <!-- 部门 -->
                  <template v-if="item.objType === 0">{{ item.name }}</template>
                  <!-- 人员 -->
                  <template v-else-if="item.objType === 1">
                    <open-data v-if="isOpenData" type="userName" :openid="item.staffId"></open-data>
                    <span v-else>{{ item.name }}</span>
                  </template>
                </span>
              </div>
            </el-tooltip>
          </div>
          <div>{{ $t('common.base.tel') }}：{{ fieldValue.providerPhone }}</div>
          <div>
            {{ $t('common.base.principal') }}：
            <template v-if="fieldValue.mainPrincipal">
              <template v-if="isOpenData && fieldValue.mainPrincipal.staffId">
                <open-data type="userName" :openid="fieldValue.mainPrincipal.staffId"></open-data>
              </template>
              <template v-else>
                <span>{{ fieldValue.mainPrincipal.displayName }}</span>
              </template>
            </template>
          </div>
        </div>
        <div class="provider-account-info" v-if="type !== 'approval'">
          <div>{{ $t('serviceProvider.accountsLimit') }}：{{ fieldValue.accountAllNum || 0 }}</div>
          <div>{{ $t('serviceProvider.accountUsed') }}：{{ fieldValue.usedNum || 0 }}</div>
          <div>{{ $t('serviceProvider.remainAccounts') }}：{{ fieldValue.accountAllNum - fieldValue.usedNum || 0 }}</div>
        </div>
      </div>
      <!-- start 服务商详情折叠面板 -->
      <BaseTileLayoutTabBar
        v-if="taskLayout == 1"
        :bar-list="taskLayoutTabBarList"
        :now-item="leftActiveTab"
        @changeItem="tabBarChangeItem"
        @openLayoutModal="openBaseLayoutModal"
      ></BaseTileLayoutTabBar>
      <base-collapse class="task-detail-main-content detail-main-content" :show-collapse="showCollapse" :direction.sync="collapseDirection" :hidePartCollapse="hidePartCollapse">
        <!--start 服务商信息-->
        <template slot="left">
          <div class="task-detail-main-content-left detail-main-content-left provider_detail_tab" v-show="collapseDirection !== 'left'">
            <BaseTileLayoutTabBar
              v-if="taskLayout == 2"
              :bar-list="leftTabBarList"
              :now-item="leftActiveTab"
              @openLayoutModal="openBaseLayoutModal"
            />
            <form-view v-if="formFields.length && leftActiveTab === 'providerDetail'" :value="fieldValue" class="basic-info bbx-cell-form-view" :class="formCellCount > 1 ? 'bbx-cell-form-view-split' : ''" :form-cell-count="formCellCount" :fields="formFields">
              <!--服务商名称-->
              <template slot="providerName" slot-scope="{ field, value }">
                <div class="form-view-row bbx-form-cell-item">
                  <label>{{ field.displayName }}</label>
                  <div v-if="fieldValue.providerCode" class="form-view-row-content">{{ value }}（{{ fieldValue.providerCode }}）</div>
                  <div v-else class="form-view-row-content">
                    {{ value }}
                  </div>
                </div>
              </template>
              <!--授权地址-->
              <template slot="authorizeAddress" slot-scope="{ field, value }">
                <div class="form-view-row form-provider-view bbx-form-item bbx-form-item-view-padding">
                  <label>{{ field.displayName }}</label>
                  <div class="form-view-row-content provider-view-area common-list-table-header__v2">
                    <el-table :data="value" :border="true" max-height="250" style="width: 100%">
                      <el-table-column prop="province" :label="`${$t('common.base.province')}/${$t('common.base.municipality')}`" />
                      <el-table-column prop="city" :label="`${$t('common.base.district')}/${$t('common.base.town')}`" />
                      <el-table-column prop="dist" :label="`${$t('common.base.district')}/${$t('common.base.prefecture')}`" />
                    </el-table>
                  </div>
                </div>
              </template>
              <!--授权工单类型-->
              <template slot="authorizeTask" slot-scope="{ field, value }">
                <div class="form-view-row bbx-form-cell-item">
                  <label>{{ field.displayName }}</label>
                  <div v-if="value && value.length" class="form-view-row-content">
                    {{ value.map(item => item && item.name).join(';') }}
                  </div>
                </div>
              </template>
              <!--授权产品目录-->
              <template slot="authorizeProduct" slot-scope="{ field, value }">
                <div class="form-view-row bbx-form-cell-item">
                  <label>{{ field.displayName }}</label>
                  <div v-if="value && value.length" class="form-view-row-content">
                    {{ value.map(item => item && item.name).join(';') }}
                  </div>
                </div>
              </template>
              <!--角色-->
              <template slot="role" slot-scope="{ field, value }">
                <div class="form-view-row bbx-form-cell-item">
                  <label>{{ field.displayName }}</label>
                  <div v-if="value" class="form-view-row-content">
                    {{ value.name }}
                  </div>
                </div>
              </template>
              <!--状态-->
              <template slot="status" slot-scope="{ field, value }">
                <div class="form-view-row bbx-form-cell-item">
                  <label>{{ field.displayName }}</label>
                  <div class="form-view-row-content">
                    <div :class="['service-type', statusType[fieldValue.statusValue]]">{{ fieldValue && fieldValue.statusValue }}</div>
                  </div>
                </div>
              </template>
              <!--授权有效期-->
              <template slot="validTime" slot-scope="{ field, value }">
                <div class="form-view-row bbx-form-cell-item">
                  <label>{{ field.displayName }}</label>
                  <div v-if="value" class="form-view-row-content">{{ value.validTime }} {{ $t('common.base.to') }} {{ value.inalidTime }}</div>
                </div>
              </template>
            </form-view>
          </div>
          <div class="collapse-left" v-show="collapseDirection === 'left'">
            {{ $t('common.base.serviceProviderMessage') }}
          </div>
        </template>
        <!--end 服务商信息-->
        <!-- start 其他信息 -->
        <template slot="right">
          <div class="task-detail-main-content-right" v-show="collapseDirection !== 'right'">
            <!-- 附加组件筛选 S -->
            <BaseBarV3
              v-if="taskLayout == 2"
              :bar-list="rightTabBarList"
              :now-item="rightActiveTab"
              @changeItem="tabBarChangeItem"
              @upDateBarList="(val) => tabBarUpdateList(val, 'provide', tenantProviderId)"
            />
            <!--   服务商申请详情右侧     -->
            <template v-if="type === 'approval' && rightActiveTab === 'dynaminInfo'">
              <div class="procider-image-show">
                <base-file-item v-for="(a, index) in imageDisplays" :Source="imageDisplays" :key="index" :file="a" readonly />
              </div>
            </template>
            <!--   服务商详情右侧     -->
            <div :class="['task-detail-main-content-right-content', {'task-detail-main-content-right-height': taskLayout == 1}]" v-else>
              <provider-info-record v-if="rightActiveTab === 'dynaminInfo'" ref="dynaminRef" :primary-id="tenantProviderId" :provider-name="fieldValue.providerName" :remark-enable="buttonAuth['remark']" :collapse-direction="collapseDirection"></provider-info-record>
              <engineer-table v-if="rightActiveTab === 'engineerList'" ref="engineerRef" :service-provider-id="tenantProviderId" :code="fieldValue.providerCode" :name="fieldValue.providerName"></engineer-table>
              <service-task-table v-if="rightActiveTab === 'taskList'" ref="taskListRef" :service-provider-id="tenantProviderId"></service-task-table>
              <TabQualification v-if="tenantProviderId && rightActiveTab === 'qualificationManagement'" :user-id="tenantProviderId" mode="PROVIDER"/>
            </div>
          </div>
        </template>
        <!--  右侧面板收缩显示的内容（服务商审批详情和服务商详情显示的不一样 -->
        <template slot="rightExtend">
          <div class="collapse-right">
            {{ type === 'approval' ?
              $t('common.base.imgDisplay') :
              $t('common.base.dynamicInfo')
            }}
          </div>
        </template>
        <!-- end 其他信息 -->
      </base-collapse>
      <!-- end 服务商详情折叠面板 -->
      <modify-provider-panel ref="modifyRef" @refresh="refresh"></modify-provider-panel>
      <!--服务商审批拒绝-->
      <audit-reject ref="rejectRef" @refresh="refresh"></audit-reject>
      <!--添加工程师-->
      <add-user ref="addUserRef" @refresh="handleTabClick('engineerList')" />
      <!--角色权限-->
      <base-window size="larger" :unique="false" class-name="provider-role-model" :show.sync="dialogFormVisible" :title="title">
        <roleModule :providerId="tenantProviderId" />
      </base-window>
      <!--分配账号数-->
      <provider-account ref="providerAccount" @refresh="refresh" />
      <!--设置主负责人-->
      <main-dispatcher ref="mainDisRef" @refresh="refresh" />

      <!-- 通栏设置 -->
      <biz-layout-modal
        ref="bizLayoutModal"
        :columns="formCellCount"
        :biz-layout-type="taskLayout"
        @changeLayout="changeTaskDetailLayout">
      </biz-layout-modal>
    </template>
  </div>
</template>

<script>
/* api */
import * as ServiceProviderApi from '@src/api/serviceProviderApi';
/* component */
import ServiceTaskTable from './components/ServiceTaskTable';
import noAuth from '@src/modules/calendar/noAuth.vue';
import ProviderInfoRecord from './components/ProviderInfoRecord';
import EngineerTable from './components/EngineerTable';
import ModifyProviderPanel from '@src/modules/dept/component/ModifyProviderPanel';
import AuditReject from './components/AuditReject';
import roleModule from '@src/modules/account/roleModule/index.js';
import AddUser from '@src/modules/serviceProvider/serviceProviderManage/engineer/component/AddUser';
import ProviderAccount from '@src/modules/serviceProvider/serviceProviderManage/component/ProviderAccount.vue';
import MainDispatcher from '@src/modules/serviceProvider/serviceProviderManage/engineer/component/MainDispatcher';
import TabQualification from '@src/modules/dept/user/components/tabpane/tabQualification.vue';
import BaseTileLayoutTabBar from '@src/component/common/BaseTabBar/BaseTileLayoutTabBar.vue';
import BaseBarV3 from '@src/component/common/BaseTabBar/BaseTabBarV3.vue'

/* util*/
import { safeNewDate } from '@src/util/time';
import { formatDate } from 'pub-bbx-utils';
import platform from '@src/platform';
import _ from 'lodash';
import { getRootWindowInitData } from '@src/util/window';
import { isOpenData, openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum';

import { getUserGuideStorageBase, setUserGuideStorageBase } from '@src/util/guideStorage';
import i18n, {t} from '@src/locales';
import * as FormUtil from '@src/component/form/util'
/*mixin*/
import multiRowMixin from '@src/modules/serviceProvider/serviceProviderManage/mixin'

export default {
  name: 'service-provider-detail',
  mixins: [multiRowMixin],
  data() {
    return {
      isOpenData,
      loading: false,
      hasViewProviderAuth: true,
      statusType: {
        正常: 'authorize',
        已注销: 'resigned',
      },
      showCollapse: true,
      collapseDirection: '',
      activeName: 'dynaminInfo',
      formFields: [],
      fieldValue: {},
      tenantProviderId: '',
      buttonAuth: {
        edit: false,
        delete: false,
      }, // 按钮的权限
      type: '', // 判断进来服务商的类型：'approval'代表的是从审批列表页面进来的服务商审核详情，为空代表的是其他页面进来的服务商详情页
      imageDisplays: [], // 图片展示字段
      // 角色权限弹框
      dialogFormVisible: false,
      title: '服务商',
    };
  },
  components: {
    ServiceTaskTable,
    noAuth,
    ProviderInfoRecord,
    EngineerTable,
    ModifyProviderPanel,
    AuditReject,
    roleModule,
    AddUser,
    ProviderAccount,
    MainDispatcher,
    TabQualification,
    BaseTileLayoutTabBar,
    BaseBarV3,
  },
  filters: {   // 在 filters 节点下定义过滤器
    valueTemplate(arr) {  // 把首字母转为大写的过滤器
      var arrList = []
      arr.map( item => {
        if(item && item.name) {
          arrList.push(item.name)
        }
      })
      return arrList.join(',')
    },
  },
  computed: {
    // 判断是否是服务商
    isProviderUser() {
      return getRootWindowInitData()?.isProviderUser || false;
    },
    // 0：钉钉端，1：自建，2：企微端
    tenantType() {
      return getRootWindowInitData().tenantType;
    },
    moreBtnEnable() {
      return (!this.isProviderUser && this.buttonAuth['administerProvider']) || (this.buttonAuth['addEngineerAuth'] && this.tenantType === 1) || ['isMain', 'edit', 'delete', 'setProviderAccount'].includes(this.buttonAuth);
    },
  },
  async created() {
    try {
      this.tenantProviderId = this.$getUrlObj(window).id || '';
      this.type = this.$getUrlObj(window).type || '';
      this.loading = true;
      await this.getProviderInfo();
      if (this.$getUrlObj(window)?.openRule) {
        this.dialogFormVisible = true;
        this.title = this.fieldValue?.providerName || '服务商';
      }
    } catch (e) {
      console.error(e);
    } finally {
      this.loading = false;
    }
  },
  mounted() {
    this.computedQualityGuide();
    this.initBannerForProvider();  // 初始化服务商左右菜单
  },
  methods: {
    // 添加工程师
    addEngineer() {
      let provide = {};
      if (this.tenantProviderId) {
        provide = {
          label: this.fieldValue?.providerName,
          value: this.tenantProviderId,
        };
      }
      this.$refs?.addUserRef?.openDialog(provide);
    },
    // 打开工程师角色
    openEngineerRule() {
      this.dialogFormVisible = true;
      this.title = this.fieldValue?.providerName || this.$t('common.base.serviceProvider');
    },

    // 分配账号数量
    bulkAllocation() {
      this.$refs?.providerAccount?.openDialog([this.tenantProviderId], false);
    },

    //设主派单员
    async setMainDispatcher() {
      this.$refs.mainDisRef?.openDialog(this.tenantProviderId);
    },

    // 刷新页面
    async refresh() {
      try {
        this.loading = true;
        await this.getProviderInfo();
      } catch (e) {
        console.error(e);
      } finally {
        this.loading = false;
      }
    },
    // 设置管理员
    setManageProvider() {
      // 拼接服务商信息
      let providerInfo = {
        providerCode: this.fieldValue?.providerCode || '',
        providerName: this.fieldValue?.providerName || '',
        contacts: this.fieldValue?.providerPeople || '',
        providerPhone: this.fieldValue?.providerPhone || '',
        id: this.tenantProviderId,
      };
      this.$refs.modifyRef?.open(providerInfo);
    },
    // 获取服务商基本信息
    async getProviderInfo() {
      try {
        let res = this.type === 'approval' ? await ServiceProviderApi.getProviderApproveDetail({ id: this.tenantProviderId }) : await ServiceProviderApi.getProviderDataInfo({ tenantProviderId: this.tenantProviderId, isProviderUser: this.isProviderUser });
        if (res.success && res.code === 0) {
          let sysData = _.cloneDeep(res?.result?.providerInfoVO) || {};
          sysData.attribute = sysData.formVOList;
          
          this.formFields = res?.result?.header.filter(item => !['providerCode'].includes(item.fieldName) && item.isHidden !== 1) || [];
          sysData = await FormUtil.initRichTextContent(this.formFields, sysData)
          this.fieldValue = sysData;

          if (this.type === 'approval') {
            this.formFields = res?.result?.header.filter(item => !['imageDisplay'].includes(item.fieldName)) || []; // 审批详情的图片单独展示在右边
            this.imageDisplays = this.fieldValue?.imageDisplay || [];
          }
          res?.result?.buttonAuth.forEach(item => {
            this.buttonAuth[item.type] = item.visible;
          });
          // 处理时间戳
          if (this.fieldValue?.validTime?.inalidTime && this.fieldValue?.validTime?.validTime) {
            this.fieldValue.validTime.inalidTime = formatDate(safeNewDate(this.fieldValue.validTime.inalidTime), 'yyyy-MM-dd') || '';
            this.fieldValue.validTime.validTime = formatDate(safeNewDate(this.fieldValue.validTime.validTime), 'yyyy-MM-dd') || '';
          }
          if (this.fieldValue?.createTime) {
            this.fieldValue.createTime = formatDate(safeNewDate(this.fieldValue.createTime), 'yyyy-MM-dd HH:mm:ss') || '';
          }
        } else {
          this.hasViewProviderAuth = false;
        }
        return true;
      } catch (e) {
        console.error(e);
        return false;
      }
    },
    // 编辑服务商
    editProvider() {
      this.closeAndOpenTab('PageServiceProviderEdit', this.tenantProviderId, `type=edit&id=${this.tenantProviderId}`);
    },
    // 跳转到服务商列表
    closeAndOpenTab(type, key = '', params = '') {
      let ids = window.frameElement.dataset.id;
      this.$platform.closeTab(ids);
      let fromId = window.frameElement.getAttribute('id');
      openAccurateTab({
        type: PageRoutesTypeEnum[type],
        key,
        params,
        reload: true,
        fromId,
      });
    },
    // 注销服务商
    async logoutProvider() {
      try {
        // 1.判断服务商的状态是否已注销，若已注销，则提示已注销
        if (this.fieldValue?.status === '0') {
          this.$message.warning(this.$t('serviceProvider.providerOut'));
        } else {
          await this.$confirm(this.$t('serviceProvider.providerLogout'), this.$t('serviceProvider.logoutTip'));
          // 2.调用接口去注销服务商
          let res = await ServiceProviderApi.stopProvider({ tenantProviderId: this.tenantProviderId });
          platform.notification({
            type: res.success ? 'success' : 'error',
            title: res.success ? this.$t('common.base.logoutSuccess') : this.$t('common.base.lououtFailed'),
            message: !res.success && res.message,
          });
          if (res.success && res.code === 0) {
            // 跳转到列表页面
            this.closeAndOpenTab('PageServiceManage');
          }
        }
      } catch (e) {
        console.error(e);
      }
    },

    // 同意审批
    async agreeAudit() {
      try {
        await this.$platform.confirm(this.$t('serviceProvider.passTheAudit'), this.$t('serviceProvider.confirmJoin'));
        this.closeAndOpenTab('PageServiceProviderCreate', '', `approvalId=${this.tenantProviderId}&type=approval`);
      } catch (e) {
        console.error(e);
      }
    },

    // 拒绝服务商注册
    rejectAudit() {
      this.$refs?.rejectRef?.openDialog(this.tenantProviderId);
    },

    async handleTabClick(name) {
      switch (name) {
        case 'dynaminInfo':
          this.$refs.dynaminRef && (await this.$refs.dynaminRef.searchRecord()); // 动态信息
          break;
        case 'engineerList':
          this.$refs.engineerRef && (await this.$refs.engineerRef.fetchData()); // 工程师列表
          break;
        case 'taskList':
          this.$refs.taskListRef && (await this.$refs.taskListRef.fetchData()); // 工单列表;
          break;
        default:
          this.loading = false;
      }
      this.loading = false;
    },
    async computedQualityGuide() {
      try {
        let stashObj = await getUserGuideStorageBase();
        if (!stashObj?.['guide_servicePorvider_qulitytab']?.isComplete) {
          this.$Guide(
            [
              {
                content: this.$t('qualificationManagement.view.tips4'),
                haveStep: false,
                nowStep: 1,
                id: 'servicePorvider-tab-qualificationManagement-guide',
                domId: 'tab-qualificationManagement',
                apendToBody: true,
              },
            ],
            0,
            '',
            e => {
              return new Promise((resolve, reject) => {
                resolve();
              });
            }
          )
            .create()
            .then(res_ => {
              if (res_)
                setUserGuideStorageBase({
                  userGuideList: [
                    {
                      type: 'guide_servicePorvider_qulitytab',
                      step: 1,
                      isComplete: 1,
                    },
                  ],
                });
            });
        }
      } catch (err) {
        console.error(err);
      }
    },

    initBannerForProvider() {
      let leftTabBarList = [
        { position: 'left', tabLabel:i18n.t('common.base.serviceProviderMessage'), tabName: 'providerDetail', tabShow: true},
      ]
      let rightTabBarList = []
      // 服务商申请详情和服务商详情展示的右侧不一样
      if(this.type === 'approval') {
        rightTabBarList = [
          { position: 'right', tabLabel: i18n.t('common.base.imgDisplay'), tabName: 'dynaminInfo', tabShow: true, disabled: true}, // 动态信息
        ]
      }else {
        rightTabBarList = [
          { position: 'right', tabLabel:i18n.t('common.base.dynamicInfo'), tabName: 'dynaminInfo', tabShow: true, disabled: true}, // 动态信息
          { position: 'right', tabLabel:i18n.t('common.base.stationEngineer'), tabName: 'engineerList', tabShow: true}, // 站内工程师
          { position: 'right', tabLabel:i18n.t('common.label.taskList'), tabName: 'taskList', tabShow: true}, // 工单列表
          { position: 'right', tabLabel:i18n.t('common.pageTitle.pageQualificationManagementList'), tabName: 'qualificationManagement', tabShow: true}, // 资质
        ]
      }
      this.initBanner(leftTabBarList, rightTabBarList, 'provide', this.tenantProviderId);
    },
  },
};
</script>

<style lang="scss">
@import './ProviderDetailView.scss';
.provider-role-model {
  .base-window-content-body {
    padding: 4px;
    height: 100%;
    overflow: hidden;
  }

  .base-window-content-footer {
    display: none;
  }
}
.el-dropdown-provider {
  width: 100px;
  text-align: center;
  .el-dropdown-menu__item {
    width: 100px;
    line-height: 27px;
    padding: 0 15px;
    font-size: 13px;
    color: #595959;
  }
}
.engineer-info-manage-popper {
  max-width: 150px;
}
</style>
<style lang="scss" scoped>
.service-detail-header {
  .service-detail-header-left {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    .provider-basic-info {
      height: 24px;
      font-size: 16px;
      font-weight: 500;
      color: $text-color-primary;
      line-height: 24px;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      .el-tag {
        margin-bottom: 0;
      }
    }
    .provider-btn {
      flex-shrink: 0;
    }
  }
  .provider-other-info {
    display: flex;
    > div {
      width: 30%;
      margin-right: 16px;
      display: flex;
      .title {
        flex-shrink: 0;
      }
    }
  }
  .engineer-info-manage {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .provider-account-info {
    display: flex;
  }
  .provider-account-info div {
    width: 30%;
    margin-right: 16px;
  }
}
.provider-view-area {
  ::v-deep .el-table--border {
    border: 1px solid #ebeef5 !important;
  }
}

.service-type {
  width: 52px;
  height: 22px;
  line-height: 22px;
  border-radius: 11px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}
.self-employed {
  background: #fff2e8;
  color: #ff7a45;
  border: 1px solid #ffd8bf;
}
.authorize {
  background: #f6ffed;
  color: #73d13d;
  border: 1px solid #d9f7be;
}
.resigned {
  background: #fafafa;
  color: #8c8c8c;
  border: 1px solid #e8e8e8;
}
::v-deep .el-table--border {
  border: 1px solid #ebeef5 !important;
}
.procider-image-show {
  padding: 8px 20px;
}
.form-provider-view {
  align-items: flex-start;
}

.bbx-cell-form-view{
  height: calc(100% - 32px);
  overflow-y: auto;
  padding: 16px;
}
.bbx-cell-form-view-split{
  padding: 16px 16px 16px 16px;
}
</style>
<style>
.provider_detail_tab .el-tabs__header .el-tabs__active-bar {
  width: 70px !important;
}
</style>
